<template>
  <div class="little">
    <el-tabs v-model="activityName" type="border-card" @tab-click="tabChange">
      <el-tab-pane name="/vipMainMassage" label="会员基本信息">
        <div class="page-content">
          <router-view v-if="selectMaterials()"></router-view>
        </div>
      </el-tab-pane>
      <el-tab-pane name="/operatingData" label="操作记录">
        <div class="page-content">
          <router-view v-if="selectOperatingData()"></router-view>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  //注意路径
  export default {
    data() {
      return {
        activityName: "/vipMainMassage",
        id:''
      };
    },
    watch: {
      $route(newValue, oldValue) {
        var path = this.$route.fullPath;
        if (path == "/vipMainMassage") {
          this.goHome();
          return;
        }
        if (path.startsWith("/vipMainMassage")) {
          this.activityName = "/vipMainMassage";
        }else if(path.startsWith("/operatingData")){
          this.activityName = "/operatingData";
        } else {
          this.activityName = this.$route.fullPath;
        }
      }
    },
    created() {
      window.this = this;
      this.id = this.$route.query.id;
      // this.activityName=this.$route.fullPath;
      console.log(this.$route);
      if(this.$route.path=='/vipMassage/show'){
        this.goHome();
      }else {
        this.activityName = this.$route.path.substring(0,this.$route.path.lastIndexOf("/"));
        console.log(this.activityName);
        console.log(this.$route.path);
        this.router.push({ path: this.$route.path,query:{id:this.id}});
      }
    },
    methods: {
      goBack() {
        this.router.go(-1);
      },
      goHome() {
        this.activityName = "/vipMainMassage";
        this.router.push({ path: "/vipMainMassage/dataTable",query:{id:this.id}});
      },
      tabChange(active) {
        this.activityName = active.name;
        if (active.name == "/vipMainMassage") {
          this.router.push({ path: "/vipMainMassage/dataTable",query:{id:this.id} });
        } else if(active.name == "/operatingData"){
          this.router.push({ path: "/operatingData/dataTable",query:{id:this.id}});
        }else {
          this.router.push({ path: active.name});
        }
      },
      selectMaterials(){
        return this.activityName.startsWith("/vipMainMassage");
      },
      selectOperatingData(){
          return this.activityName.startsWith("/operatingData");
      }
    }
  };
</script>
<style scoped>
</style>
